<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title>组件基础-通过插槽分发内容</title>
</head>
<body>

<div id="app">

  <alert-box>
  Something bad happened.
</alert-box>

</div>



<script type="text/javascript">

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})


var app=new Vue({
  el: '#app',
  data: {
    
  },

})

</script>

</body>
</html>